import axios from "axios";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { ListItem } from "../home";
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import { useDispatch } from "react-redux/es/exports";


const Detail = () => {
  const { id } = useParams();
	const dispatch = useDispatch()
  const [item, setItem] = useState<null | ListItem>(null);
  const fetchData = async (id: string) => {
    const resp = await axios.post("/api/detail", { id });
    setItem(resp.data.data);
  };

  useEffect(() => {
    fetchData(id as string);
  }, []);
  if (!item) return <div>加载中...</div>;
  return (
    <div>
      <img src={item.url} alt="" width={"100%"} />
      <h3>{item.title}</h3>
      <p>{item.desc}</p>
      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text="客服"
          onClick={() => console.log("chat click")}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text="购物车"
          onClick={() => console.log("cart click")}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text="店铺"
          onClick={() => console.log("shop click")}
        />
        <ActionBar.Button
          type="danger"
          text="假日购物车"
          onClick={() => dispatch({ type: 'addCar', payload: item }) }
        />
      </ActionBar>
    </div>
  );
};

export default Detail;
